<template>
   <div>
        <div class="search">
            <input class="search-input" type="text" placeholder="输入城市名或拼音" v-model="keyword">
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{ item.name }}</li>
                <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
            </ul>
        </div>
   </div>
</template>

<script>
    import Bscroll from 'better-scroll'
    import { mapMutations } from 'vuex'
    export default {
        name: 'CitySearch',
        props:['cities'],
        data() {
            return {
                keyword:'',
                list:[],
                timer: null //节流阀
            }
        },
        methods: {
            handleCityClick(city) {
                // alert(city)
                // this.$store.commit('ChangeCity', city)
                 this.ChangeCity(city)
                // 选择城市后跳转
                this.$router.push('/')
            },
            ...mapMutations(['ChangeCity'])
        },
        computed:{
            hasNoData(){
                return !this.list.length
            }
        },
        watch:{
            keyword(){
                if(this.timer){
                    clearTimeout(this.timer)
                }
                // 如果输入为空
                if(!this.keyword)
                {
                    this.list = []
                    return 
                }
                this.timer = setTimeout(()=>{
                    const result = []
                    for(let i in this.cities){
                        this.cities[i].forEach((value) => {
                            if(value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1){
                                result.push(value)
                            }
                        });
                    }
                    this.list = result
                },100)
            }
        },
        mounted() {
            this.scroll = new Bscroll(this.$refs.search,{click:true})
        },
    }
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .search 
        height: .72rem
        background: $bgColor
        padding: 0 .1rem
        .search-input
            width: 100%
            height: .62rem
            line-height: .62rem
            padding: 0 .1rem
            box-sizing: border-box
            text-align: center
            border-radius: .06rem
            color: #666
    .search-content
        position: absolute
        top: 1.58rem 
        left: 0
        right: 0
        bottom: 0
        overflow: hidden
        background: #eee
        z-index: 1
        .search-item
            line-height: .62rem
            padding-left: .2rem 
            background: #fff
            color: #666
            
</style>